<template>
  <div class="main">
    <div class="header">
      <div class="header-left fl" id="time"></div>
      <div class="header-center fl">
        <div class="header-title">
          故障分析和数据洞察
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-right fl"></div>
      <div class="header-bottom fl"></div>
    </div>
    <div class="center">
      <div class="center-left fl">
        <div class="left-top">
          <!--<h1 id="ceshi">数据可视化</h1>-->
          <div class="title0">基本信息</div>
          <div class="top-list">
            <ul>
              <li>设备数量: {{number}}</li>
              <li>设备分布</li>
              <li>故障次数</li>
              <li>准确次数</li>
              <li>已解决次数</li>
              <li>待解决次数</li>
            </ul>
          </div>

        </div>
        <div class="left-cen">
          <div class="title0">数据权重分析</div>
          <div style="height: 175px">
            <el-row >
              <el-col :span="6">
                <div style="color: white;margin-left: 8px;margin-top: 8px">
                  冲程M:<br>
                  冲次次/min:<br>
                  功图点数:<br>
                  最大载荷:<br>
                  最小载荷:
                </div>
              </el-col>
              <el-col :span="18">
                <div style="color: white;margin-left: 8px;margin-top: 8px">
                  加权权重 = 0.054072667184671824<br>
                  加权权重 = 0.0758601864834423<br>
                  加权权重 = 0.0828171683583308<br>
                  加权权重 = 0.05360787711897004<br>
                  加权权重 = 0.06271815154921626
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="left-bottom">
          <div class="title0">机器管理数据</div>
          <div style="color: white;margin-left: 70px;margin-top:70px;cursor: pointer" @click="this.$router.push('/manage')">
            具体内容请前往机器管理页面查看
          </div>
          <!-- -->
        </div>
      </div>
      <div class="center-cen fl">
        <div class="cen-top">
          <div class="title0">故障次数</div>
            <div id="chart1" class="allnav" ref="mychart4"></div>
        </div>
        <div class="cen-center">
          <div class="title0">示功图图示</div>
          <div class="bottom-b">
            <div id="chart6" class="allnav" ref="mychart5">
            </div>
          </div>
        </div>
        <div class="cen-bottom">
          <div class="title0">设备地址故障次数统计</div>
          <div class="bottom-c">
            <div id="chart4" class="allnav" ref="mychart3">
            </div>
          </div>
        </div>
      </div>
      <div class="center-right fr">
        <div class="right-top">
          <div class="title0" >数据可视化测试</div>

          <div class="echart wenzi" style="height: 150px;">
            <div class="gun" style="height: 18px">
              <span>排名</span>
              <span>机械名</span>
              <span>故障次数</span>
            </div>
            <div id="FontScroll" class="myscroll" style="height: 130px;overflow: auto">
              <ul style="height: 15px">
                <li style="height: 15px;margin-top: 5px" v-for="(list,item) in lists" :key="list">
                  <div class="fontInner clearfix" style="height: 15px">
                    <span>
                      <b>{{ item+1 }}</b>
                    </span>
                    <span>{{ list.well_commom_nameis }}</span>
                    <span>{{ list.count }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right-cen">
          <div class="title0">故障类型</div>
          <div id="chart2" class="allnav" ref="mychart1">
          </div>
        </div>
        <div class="right-bottom">
          <div class="title0">故障次数变化</div>
            <div id="chart5" class="allnav" ref="mychart2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
  name: "data",
  data() {
    return {
      lists: [],
      number: ''
    }
  },
  mounted() {
    let myEcharts=echarts.init (this.$refs.mychart5)
    myEcharts.resize({
      width: 590,
      height: 250
    });
    myEcharts.setOption({

      xAxis: {
      },
      yAxis: {
      },
      grid: {
        left: "5%",
        top: "5%"
      },
      series: [
        {
          symbolSize: 0,
          data: [
            [0.00, 41.30],
            [0.00, 42.00],
            [0.00, 42.50],
            [0.00, 43.10],
            [0.01, 43.70],
            [0.02, 44.10],
            [0.03, 45.00],
            [0.03, 45.80],
            [0.05, 46.80],
            [0.07, 47.90],
            [0.07, 48.60],
            [0.09, 49.70],
            [0.11, 50.50],
            [0.13, 51.70],
            [0.15, 52.80],
            [0.17, 53.50],
            [0.19, 54.50],
            [0.22, 56.00],
            [0.24, 57.30],
            [0.27, 58.80],
            [0.29, 60.00],
            [0.32, 61.50],
            [0.35, 62.90],
            [0.37, 63.90],
            [0.41, 65.30],
            [0.44, 66.10],
            [0.47, 66.90],
            [0.50, 67.10],
            [0.53, 67.00],
            [0.56, 66.40],
            [0.60, 65.70],
            [0.63, 64.50],
            [0.67, 63.30],
            [0.70, 62.30],
            [0.74, 61.30],
            [0.77, 60.60],
            [0.81, 59.90],
            [0.86, 59.40],
            [0.89, 59.30],
            [0.93, 59.60],
            [0.97, 60.10],
            [1.00, 60.70],
            [1.05, 61.70],
            [1.08, 62.40],
            [1.12, 63.20],
            [1.16, 63.80],
            [1.20, 64.10],
            [1.24, 64.30],
            [1.27, 64.40],
            [1.31, 64.30],
            [1.35, 63.90],
            [1.39, 63.50],
            [1.42, 62.70],
            [1.46, 62.00],
            [1.50, 61.30],
            [1.54, 60.70],
            [1.57, 60.30],
            [1.61, 59.90],
            [1.66, 59.90],
            [1.69, 59.90],
            [1.73, 60.00],
            [1.76, 60.20],
            [1.80, 60.70],
            [1.84, 61.10],
            [1.87, 61.60],
            [1.91, 62.10],
            [1.94, 62.40],
            [1.98, 62.70],
            [2.02, 62.70],
            [2.05, 62.60],
            [2.08, 62.50],
            [2.11, 62.30],
            [2.14, 62.00],
            [2.18, 61.50],
            [2.21, 61.10],
            [2.24, 60.40],
            [2.27, 59.80],
            [2.29, 59.50],
            [2.33, 59.20],
            [2.35, 59.10],
            [2.38, 59.10],
            [2.41, 59.10],
            [2.44, 59.40],
            [2.48, 59.60],
            [2.51, 59.80],
            [2.54, 60.20],
            [2.58, 60.70],
            [2.60, 60.90],
            [2.63, 61.00],
            [2.66, 61.00],
            [2.69, 60.80],
            [2.72, 60.40],
            [2.74, 60.10],
            [2.77, 59.70],
            [2.79, 59.50],
            [2.81, 59.00],
            [2.84, 58.30],
            [2.85, 57.80],
            [2.88, 57.40],
            [2.89, 57.20],
            [2.91, 57.10],
            [2.93, 57.00],
            [2.94, 56.70],
            [2.95, 56.20],
            [2.96, 56.00],
            [2.97, 55.90],
            [2.98, 55.90],
            [2.98, 56.10],
            [2.99, 56.20],
            [3.00, 56.40],
            [3.00, 56.50],
            [3.00, 56.60],
            [3.00, 56.50],
            [2.99, 56.40],
            [2.99, 56.60],
            [2.98, 56.70],
            [2.97, 56.60],
            [2.96, 56.50],
            [2.96, 56.50],
            [2.94, 56.20],
            [2.93, 56.00],
            [2.92, 55.80],
            [2.90, 55.40],
            [2.89, 55.40],
            [2.87, 55.50],
            [2.85, 55.40],
            [2.83, 55.30],
            [2.81, 55.40],
            [2.78, 55.40],
            [2.76, 55.40],
            [2.74, 55.40],
            [2.71, 55.30],
            [2.68, 55.00],
            [2.66, 54.00],
            [2.63, 52.80],
            [2.60, 50.50],
            [2.57, 47.10],
            [2.53, 44.30],
            [2.50, 41.30],
            [2.47, 39.40],
            [2.42, 38.70],
            [2.39, 38.00],
            [2.34, 37.60],
            [2.30, 36.90],
            [2.25, 36.00],
            [2.20, 35.10],
            [2.15, 33.30],
            [2.10, 31.30],
            [2.05, 27.90],
            [1.99, 26.50],
            [1.93, 27.40],
            [1.88, 28.60],
            [1.82, 29.20],
            [1.77, 30.20],
            [1.71, 31.10],
            [1.65, 31.50],
            [1.59, 31.90],
            [1.53, 32.30],
            [1.48, 33.30],
            [1.42, 34.80],
            [1.35, 35.40],
            [1.31, 35.30],
            [1.24, 35.10],
            [1.18, 35.00],
            [1.13, 34.80],
            [1.07, 34.70],
            [1.02, 34.50],
            [0.97, 34.50],
            [0.90, 34.40],
            [0.86, 33.90],
            [0.81, 33.30],
            [0.76, 33.10],
            [0.71, 33.30],
            [0.66, 33.50],
            [0.62, 33.60],
            [0.57, 33.80],
            [0.54, 34.00],
            [0.49, 34.30],
            [0.45, 34.30],
            [0.41, 34.40],
            [0.37, 35.00],
            [0.33, 35.60],
            [0.31, 36.00],
            [0.27, 36.00],
            [0.25, 36.00],
            [0.22, 36.10],
            [0.18, 36.10],
            [0.16, 36.00],
            [0.14, 36.10],
            [0.12, 36.60],
            [0.10, 37.10],
            [0.07, 37.20],
            [0.07, 37.10],
            [0.05, 37.20],
            [0.03, 37.70],
            [0.03, 38.60],
            [0.02, 39.20],
            [0.01, 40.10],
            [0.00, 40.80]
          ],
          type: 'line',
          color: [
            '#73b9bc',
          ],
        }
      ]
    })
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get('/user/getResultCount').then(response => {
        const myEcharts = echarts.init(this.$refs.mychart1)
        const options = {
          tooltip: {
            trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            top: '1%',
                left: 'center',
                textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '故障类型占比和数量',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 15,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: response.data.map(item => ({ name: item.result, value: item.count }))
            }
          ]
        }
        myEcharts.setOption(options)
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })

      axios.get('/user/getSort').then(response => {
        this.lists = response.data
      }).catch(error => {
        console.log(error)
      })

      axios.get('/user/getMonthCount').then(response => {
        const jsonData = response.data;
        const counts = jsonData.map(function(item) {
          return item.count;
        })
        console.log(counts)
        const myEcharts0 = echarts.init(this.$refs.mychart2)
        const options0 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom:'10%',
            top:'4%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug','Sep','Oct','Nov','Dec']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '',
              data: counts,
              type: 'line',
              color: [
                '#96BFFF'
              ],
            }
          ]
        }
        myEcharts0.setOption(options0)
        const myEcharts = echarts.init(this.$refs.mychart4)
        const options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: '-3%',
            left: 'right',
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top:'3%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug','Sep','Oct','Nov','Dec']
          },
          series: [
            {
              name: '',
              type: 'bar',
              color: [
                '#73b9bc',
              ],
              data: counts
            }
          ]
        }
        myEcharts.setOption(options)
      }).catch(error => {
        console.log(error)
      })

      axios.get('/user/getIP').then(response => {
        const jsonData =response.data
        const resizeIP =jsonData.map(item => {
          const parts = item.assem_idis.split('.');  // 按照点号分割字符串
          const ipPart = parts.slice(0, 3).join('.');  // 取前三部分
          item.assem_idis = ipPart;  // 更新字段的值
          return item;
        })
        const categorizedData = resizeIP.reduce((result, item) => {
          const existingItem = result.find(i => i.assem_idis === item.assem_idis);  // 查找已存在的分类项

          if (existingItem) {
            existingItem.count += item.count;  // 更新已存在的分类项的数量
          } else {
            result.push(item);  // 将新的分类项添加到结果数组中
          }
          return result;
        }, []);
        const counts = categorizedData.map(function(item) {
          return item.count;
        })
        const IP = categorizedData.map(function(item) {
          return item.assem_idis;
        })
        console.log(categorizedData)
        console.log(counts)
        console.log(IP)
        const myEcharts = echarts.init(this.$refs.mychart3)
        const options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: IP,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              color: [
                '#8378EA',
              ],
              name: '',
              type: 'bar',
              barWidth: '60%',
              data: counts
            }
          ]
        }
        myEcharts.setOption(options)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped lang="css" src="../assets/css/index.css" />
<style scoped>

</style>
